import React, { useEffect, useState, useRef } from 'react';
import ApngPlay from './ApngPaly';

interface IProps {
  startFrame?: number, // 从第几帧开始播放
  endFrame?: number, // 从第几帧结束播放
  play?: boolean, // 是否开始播放
  startLoopPlay?: () => void, // 当前循环到初始帧callback
  endLoopPlay?: () => void, // 当前循环到结束帧callback
  style?: Object,
  imgPath: string,
  imgRef: any;
}

const UseApng = ({ imgPath, imgRef, startFrame, endFrame, style, startLoopPlay, endLoopPlay }: IProps) => {
  const frameCls = useRef<any>();

  const init = async () => {
    frameCls.current = await new ApngPlay(imgPath);
    await frameCls.current.init();
    frameCls.current.play(imgRef.current, startFrame, endFrame, startLoopPlay, endLoopPlay);
  }

  useEffect(() => {
    init();
  }, [])
}

export default UseApng
